<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  >
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>

<script>
  const arr = [
    { 'id': '29', 'pid': '', 'name': '总裁办' },
    { 'id': '2c', 'pid': '', 'name': '财务部' },
    { 'id': '2d', 'pid': '2c', 'name': '财务核算部' },
    { 'id': '2f', 'pid': '2c', 'name': '薪资管理部' },
    { 'id': 'd2', 'pid': '', 'name': '技术部' },
    { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部' }
  ]
  var data = [
    { id: '01', name: '张大大', pid: '', job: '项目经理' },
    { id: '02', name: '小亮', pid: '01', job: '产品leader' },
    { id: '03', name: '小美', pid: '01', job: 'UIleader' },
    { id: '04', name: '老马', pid: '01', job: '技术leader' },
    { id: '05', name: '老王', pid: '01', job: '测试leader' },
    { id: '06', name: '老李', pid: '01', job: '运维leader' },
    { id: '07', name: '小丽', pid: '02', job: '产品经理' },
    { id: '08', name: '大光', pid: '02', job: '产品经理' },
    { id: '09', name: '小高', pid: '03', job: 'UI设计师' },
    { id: '10', name: '小刘', pid: '04', job: '前端工程师' },
    { id: '11', name: '小华', pid: '04', job: '后端工程师' },
    { id: '12', name: '小李', pid: '04', job: '后端工程师' },
    { id: '13', name: '小赵', pid: '05', job: '测试工程师' },
    { id: '14', name: '小强', pid: '05', job: '测试工程师' },
    { id: '15', name: '小涛', pid: '06', job: '运维工程师' }
  ]

  function arr2tree(data, pid = '') {
    return data.reduce((prev, item) => {
      if (item.pid === pid) {
        // if (item.children)
        const children = arr2tree(data, item.id)
        if (!item.children) {
          item.children = children
        }
        prev.push(item)
        if (!item.children.length) {
          delete item.children
        }
      }
      return prev
    }, [])
  }

  function tranListToTreeData(list) {
    // 1. 定义两个变量
    const treeList = [], map = {}
    // 2. 建立一个映射关系，并给每个元素补充children属性.
    // 映射关系: 目的是让我们能通过id快速找到对应的元素
    // 补充children：让后边的计算更方便
    list.forEach(item => {
      if (!item.children) {
        item.children = []
      }
      map[item.id] = item
    })

    // 循环
    list.forEach(item => {
      // 对于每一个元素来说，先找它的上级
      //    如果能找到，说明它有上级，则要把它添加到上级的children中去
      //    如果找不到，说明它没有上级，直接添加到 treeList
      const parent = map[item.pid]
      // 如果存在上级则表示item不是最顶层的数据
      if (parent) {
        parent.children.push(item)
      } else {
        // 如果不存在上级 则是顶层数据,直接添加
        treeList.push(item)
      }
    })
    // 返回
    return treeList
}
//  const arr1 =  arr2tree(arr)
// console.log(arr1)
// const arr2 = arr2tree(data)
// console.log(arr2)
    const arr3 = tranListToTreeData(data)
    console.log(arr3)
    const arr4 = tranListToTreeData(arr)
    console.log(arr4)


</script>
</html>
